<template>
    <view class="pagebox">
        <uni-forms :modelValue="postItem" ref="postItem" 
        :rules="rules" 
        label-width="80px">
            <uni-forms-item label="客户" required name="client_id">
                <picker mode = "selector" :range="clientlist" range-key="label" @change="selclient">
                    <view style="display: flex;align-items: center;height: 72rpx;">
                        <text class="client_name">{{postItem.client_name || "请选择"}}</text>    &nbsp;&nbsp;&nbsp;&nbsp;<uni-icons type="bottom" size="18"></uni-icons>
                    </view>
                </picker>
            </uni-forms-item>
            <uni-forms-item label="项目" required name="title">
                <uni-easyinput type="text" v-model="postItem.title" placeholder="请输入内容"></uni-easyinput>
            
            </uni-forms-item>
            <uni-forms-item label="今日完成" required name="todayend">
               <uni-easyinput type="textarea" v-model="postItem.todayend" placeholder="请输入内容"></uni-easyinput>
            
            </uni-forms-item>
            <uni-forms-item label="未完成" name="notend">
               <uni-easyinput type="textarea" v-model="postItem.notend" placeholder="请输入内容"></uni-easyinput>
            
            </uni-forms-item>
            <uni-forms-item label="需协调" name="needhelp">
               <uni-easyinput type="textarea" v-model="postItem.needhelp" placeholder="请输入内容"></uni-easyinput>
            
            </uni-forms-item>
            <uni-forms-item label="图片" name="images">
              <view class="imglist">
                  <view class="imgone" v-for="(val,index) in postItem.images" :key="index" @click="delimg(index)">
                      <image class="thumb" :src="val" mode="widthFix"></image>
                      <uni-icons class="close" type="clear" size="12" color="#e43d33"></uni-icons>   
                  </view>    
                  <view class="imgone" v-if="postItem.images.length<12" @click="selfile">
                      <uni-icons type="plusempty" size="20"></uni-icons>
                      <view>{{postItem.images.length}}/12</view> 
                      
                  </view>
              </view>
            </uni-forms-item>
            <view class="btns">
                <button type="primary" size="mini" @click="submit('postItem')">提交</button>
            </view>
            
        </uni-forms>
    </view>
</template>

<script>
  
    export default{
        name:"Dailyadd",
        components: {},
        data(){
            return{
                orderlist:[
                    {
                        label:"不绑定",
                        id:0
                    },{
                        label:"天安门挂腻子",
                        id:1
                    }
                ],
                uploadUrl: "http://localhost/api/user/upload",
                header:{},
                postItem:{
                    title:'',
                    todayend:'',
                    notend:"",
                    needhelp:"",
                    images:[],
                    client_name:'',
                    client_id:''
                },
                rules:{
                    todayend:{
                        rules: [{
                            required: true,
                            errorMessage: '今日完成内容不能为空'
                        }]
                    },
                    client_id:{
                        rules: [{
                            required: true,
                            errorMessage: '所属客户不能为空'
                        }]
                    },
                    title: [{
                        required: true,
                        errorMessage: '项目标题不能为空'
                    }]
                },
                clientlist: [],
            }
        },
        onLoad(option){
            this.uploadUrl = this.$api.postURL+'user/upload'
            this.header = {Authorization:uni.getStorageSync('nangtong_login_token')}
            this.getclientlist()
            if(option && option.id){
                this.getone(option.id)
            }
        },
        onShow(){
            
        },
            
        methods:{
            selclient(e){
         
                var item = this.clientlist[e.detail.value]
                this.postItem.client_id = item.id
                this.postItem.client_name = item.label
            },
            getclientlist(){
                this.$api.get(`client/list`).then((res)=>{
                    this.clientlist = res.data
                })
            },
            getone(id){
                this.$api.get(`daily/getone?id=${id}`).then(({data})=>{
                    this.postItem = data
                })
            },
            selfile(){
                var _this = this
                var len = 12 - this.postItem.images.length
                uni.chooseImage({
                    count:len,
                    success:function(res){
                  
                        var array = []
                        res.tempFilePaths.forEach(function(val,index){
                            array.push({
                                name:'file_'+index,
                                uri:val
                            })
                        })
                      
                        uni.showLoading({
                            title:'上传中...',
                            mask:true
                        })
                        var uploadTask = uni.uploadFile({
                            url:_this.$api.postURL+'user/upload',
                            files:array,
                            fileType:"image",
                            name:"file",
                            header:{
                                Authorization:uni.getStorageSync('nangtong_login_token')
                            },
                            formData:{},
                            success: (uploadFileRes) => {
                                var data = JSON.parse(uploadFileRes.data);
                                
                                if(data.code == 0){
                                    _this.$error(data.message)
                                }else{
                                   _this.$success("上传成功") 
                                   _this.postItem.images = _this.postItem.images.concat(data.data)
                                }
                            },
                            complete:function(){
                             
                                uni.hideLoading()
                            }
                        })
                      
                    },
                    
                })
            },
            delimg(index){
                this.postItem.images.splice(index,1)
            },
            submit(ref){
                this.$refs[ref].validate().then(res => {
                   this.$api.post(`daily/add`,this.postItem).then(()=>{
                       this.$success("上传成功")
                       setTimeout(function(){
                           uni.navigateBack({data:1})
                       },500)
                   })
                }).catch(err => {
                    console.log('err', err);
                })
            },
            seloid(e){
                var order = this.orderlist[e.detail.value]
                if(!order.id){
                    this.postItem.oid = ''
                    this.postItem.order_name = ''
                }else{
                    this.postItem.oid = order.id
                    this.postItem.order_name = order.label
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .pagebox{
        background-color: #fff;
        padding: 20rpx;
    }
    .btns{
        button{
            display: block;
            width: 80%;
            margin: 0 auto;
        }
    }
    .bbb{
        display: block;
        margin: 0 auto;
    }
    .imglist{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .imgone{
            width: 100rpx;
            height: 100rpx;
            border-radius: 5rpx;
            overflow: hidden;
            text-align: center;
            border: 1px solid #c7c9ce;
            margin-right: 20rpx;
            position: relative;
            margin-bottom: 10rpx;
            .close{
                position: absolute;
                top: -10rpx;
                right: 2rpx;
                z-index: 9;
            }
            .thumb{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>